<template>
  <div>

    <!-- 头部区域 -->
    <home-header></home-header>

    <!-- 主体部分 -->
    <div id="main">
      <!-- Main content -->

      <!-- 背景轮播图 -->
      <div class="bg-carousel">
        <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
        <el-carousel
         height="88vh"
         :interval="5000"
         arrow="never"
         :autoplay="true">
          <el-carousel-item v-for="(item, index) in carouselList" :key="index">
            <el-image fit="fill" class="carousel-img" :src="item.url"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 登录的表单 -->
      <div class="login_form">
        <!-- 超管和用户的切换 -->
        <div class="switch">
          <div :class="userActive" @click="chooseUser()">师生登录</div>
          <div :class="managerActive" @click="chooseManager()">管理员登录</div>
        </div>
        <!-- 用户登录：学生或者老师 -->
        <el-form
        :model="loginFormUser"
        label-width="0px"
        :rules="loginFormRules"
        ref="userloginFormRef"
        :class="userFormStyle">
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
            v-model="loginFormUser.username"
            prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
            v-model="loginFormUser.password"
            prefix-icon="el-icon-lock"
            type="password"
            ></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item class="btns">

            <!-- 在这里可以全部使用调用验证登录逻辑的组件，然后传入一个参数来分别指向两种登录情况 -->

            <el-button type="primary"  style="background-color: #01774F;" @click="Verify(1)">登录</el-button>
            <el-button type="info" @click="resetUserLoginForm">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 管理员登录 -->
        <el-form
        :model="loginFormManager"
        label-width="0px"
        :rules="loginFormRules"
        ref="managerloginFormRef"
        :class="managerFormStyle">
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
            v-model="loginFormManager.username"
            prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
            v-model="loginFormManager.password"
            prefix-icon="el-icon-lock"
            type="password"
            ></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item class="btns">
            <el-button type="primary" style="background-color: #01774F;" @click="Verify(2)">登录</el-button>
            <el-button type="info" @click="resetManagerLoginForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 滑动验证 -->
      <el-dialog
        title="Are you Human?"
        :visible.sync="dialogVisible"
        width="360px"
        :before-close="handleClose">
        <!-- main content -->
        <slide-verify :l="42"
          ref="slideblock"
          :r="10"
          :w="310"
          :h="155"
          slider-text="向右滑动"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          ></slide-verify>
        <div>{{ slideMsg }}</div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span> -->
      </el-dialog>

    </div>
  </div>
</template>

<script>
import HomeHeader from '@/components/HomeHeader.vue'
export default {
  components: { HomeHeader },
  data () {
    return {
      // 登录数据表单
      loginFormUser: {
        username: '',
        password: ''
      },
      loginFormManager: {
        username: '',
        password: ''
      },
      userActive: 'active',
      managerActive: 'notActive',
      userFormStyle: 'login-form active',
      managerFormStyle: 'login-form',
      // 轮播图的图片地址
      carouselList: [
        {
          url: require('../assets/imgs/login/banner1.jpeg'),
          link: '/content1'
        }, {
          url: require('../assets/imgs/login/banner2.jpeg'),
          link: '/content2'
        }, {
          url: require('../assets/imgs/login/banner3.jpeg'),
          link: '/content3'
        }
      ],
      loginFormRules: {
        username: '',
        password: ''
      },
      slideMsg: '',
      dialogVisible: false,
      // verified: false
      verifyId: 0,
      // 设置延迟时钟
      timer: ''
    }
  },
  methods: {
    // 点击之后更改类名
    chooseUser () {
      this.managerActive = 'notActive'
      this.userActive = 'active'
      this.managerFormStyle = 'login-form'
      this.userFormStyle = 'login-form active'
    },
    Verify (val) {
      this.verifyId = val
      this.dialogVisible = true
    },
    // 滑动验证
    onSuccess () {
      console.log('验证通过')
      this.slideMsg = '验证通过'
      // clearTimeout(this.timer)
      setTimeout(() => {
        if (this.verifyId == 1) {
          this.userLogin()
        } else if (this.verifyId == 2) {
          this.managerLogin()
        }
      }, 500)
    },
    handleClose (done) {
      done()
    },
    onFail () {
      console.log('验证不通过')
      this.slideMsg = '验证不通过'
      setTimeout(() => {
        this.dialogVisible = false
      }, 500)
    },
    onRefresh () {
      console.log('点击了刷新小图标')
      this.slideMsg = '已刷新'
    },
    chooseManager () {
      this.userActive = 'notActive'
      this.managerActive = 'active'
      this.userFormStyle = 'login-form'
      this.managerFormStyle = 'login-form active'
    },
    // 重置登录表单
    resetUserLoginForm () {
      this.$refs.userloginFormRef.resetFields()
    },
    resetManagerLoginForm () {
      this.$refs.managerloginFormRef.resetFields()
    },
    // 用户登录（学生和教师）
    async userLogin () {
      const { data: res } = await this.$http.post('user/all/login?username=' + this.loginFormUser.username + '&password=' + this.loginFormUser.password)
      if (!res.state) return this.$message.error('用户名或密码错误，登录失败！')
      // console.log(res)
      // 存储token
      window.sessionStorage.setItem('token', res.detail.token)
      if (res.detail.userDetail.identity == 2) {
        this.$message.success('学生登录成功！')
        this.$router.push({ path: 'student' })
      } else if (res.detail.userDetail.identity == 3) {
        this.$message.success('教师登录成功！')
        this.$router.push({ path: 'teacher' })
      }
    },
    // 管理员登录
    async managerLogin () {
      const { data: res } = await this.$http.post('user/all/login?username=' + this.loginFormManager.username + '&password=' + this.loginFormManager.password)
      if (!res.state) return this.$message.error('用户名或密码错误，登录失败！')
      // console.log(res)
      // 存储token
      window.sessionStorage.setItem('token', res.detail.token)
      this.$message.success('登录成功！')
      this.$router.push({ path: 'manager' })
    }
  }
}
</script>

<style lang="less" scoped>
.bg-lightgreen {
  background-color: #1e6f46;
  height: 12vh;
  border-radius: 2px;
  border-bottom: 2px solid #799982;
}

#main {
  position: relative;

  .bg-carousel {
    width: 100%;
    height: 88vh;

    .carousel-img {
      width: 100%;
      height: 100%;
      background: #ddd;
      opacity: 0.6;
    }
  }

  .login_form {
    position: absolute;
    right: 10%;
    top: 14%;
    z-index: 99;
    border: 1px solid #1e6f46;
    // background-color: #fff;
    border-radius: 5px;
    // padding: 0 20px;

    .switch {
      width: 100%;
      background-color: #ddd;
      display: flex;
      cursor: pointer;

      div {
        flex: 1;
        color: #01774F;
        background-color: #fff;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }

      div.active {
        color: #fff;
        background-color: #01774F;
      }
    }

    .login-form.active {
      display: block;
    }

    .login-form {
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.65);
      display: none;

      .el-input {
        width: 300px;
        font-size: 16px;
      }
    }
  }
}
</style>
